﻿@{
    ViewBag.Title = "Stress-o-meter";
}
<h1>@ViewBag.Title</h1>

<script src="~/Scripts/jquery.validate.js"></script>
<script>
    $.getScript("/Scripts/jquery.validate.js")
    function ValidateandSubmit() {      
        $("form[id='AsyncLoginFrom']").validate({
            rules: {
                userLogin: { required: true },
                userPassword: { required: true }
            },
            submitHandler: function (form) {
                SubmitData();
                return false;
            }
        });
    };
    function SubmitData() {       
        var form = $("#AsyncLoginFrom");
        if (form.valid()) {
            CloseDialog();
        }
        return false;
    }
    function DisplayQuestions()
    {
      
        var url = "/Home/Questionnaire";
        $.ajaxSetup({ cache: false });
        $('#AsyncLoginFromBody').empty();
        $('#AsyncLoginFromBody').load(url, function () {           
            $("#AsyncLoginFromBody").html(this.innerHTML);
        });
    }

    function CloseDialog() {
        var UserInfoModel = {
            UserName: $("#AsyncuserLogin").val(),
            Password: $("#AsyncuserPassword").val()
        }

        $.ajax({
            type: 'POST',
            contentType: "application/json",
            data: JSON.stringify(UserInfoModel),
            cache: false,
            url: '/Home/AsyncLogin',
            success: function (data) {
                if (data != "" || data != undefined) {
                    data = JSON.parse(data);
                    if (data.succeed) {
                      DisplayQuestions();
                    }
                    else {
                        $("#AsyncLoginFromBody").html("Invalid password or username");
                    }
                }
            }
        });
    }
</script>
<script>
    function ShowRegistration() {
        var url = "/Home/Registration";
        $.ajaxSetup({ cache: false });
        $('#AsyncLoginFrom').empty();
        $('#AsyncLoginFrom').load(url, function () {
            $("#AsyncLoginFrom").html(this.innerHTML); return;
        });
    }
</script>
<!-- main content start -->
<div class="row">
    <!-- left col start -->
    <div class="col-md-9" id="col-left">
        <p><strong>What does one do when one gets some physical problem?</strong>We go to the doctor and then he uses some measure to check the degree of problem we have eg. If one has high BP, one gets blood pressure measured or if one has Diabetes one gets blood sugar tested .Subsequently, medical help is given, as per the reading with that doctor of either the BP or sugar. However, there are no such accurate tests / biomarkers available for measuring stress.</p>
        <p>Scientifically, it becomes very challenging for us to measure the level of stress or to understand the degree of stress one is facing.</p>
        <p>
            For you to understand the concept of stress measurement, I have thought of a colorful band which comprises of green, yellow, orange & red
            colors.
        </p>
        <ul class="stressometer">
            <li class="normal">Normal</li>
            <li class="manage">Manageable</li>
            <li class="moderate">Moderate</li>
            <li class="severe">Severe</li>
        </ul>
        @*<p style="float:right"><img src="~/Content/Default/Images/stress_measurement.png" /></p>*@
        <p>While green denotes no stress on one hand and red is the other extreme denoting maximum stress requiring professional help and yellow/ orange are in areas in between the two extremes i.e. normal & severe.</p>
        <p>For example, in our life due to various challenges, responsibilities and aspirations, we can go from green zone to other zones either stepwise or sometimes even directly into the red zone which might take few hours, months or even years.</p>
        <p>Many a times we may not realize this drift which could be very gradual in one case to sudden in another.</p>
        <p>However, in my clinical experience of over 20 years, I have seen that  if one gets the right guidance at the right time and gets the right professional help, one can retrace the path from red/ orange/ yellow  band to green band through counseling &/or medicines.</p>
        <p>Based on this color band, we can identify the level of stress in our lives  as per the corresponding color and a tool like stress-o-meter can give us an idea about the color/ stress- zone we are in.</p>
        <p>By answering few questions related to you and your life, we can actually have some idea of the level of stress in your life and based on your answers we can tell you which colour zone you are in!</p>
        <p>
            Welcome to the world of Stress-o-meter!           
            @*<a href="javascript:void(0)" data-toggle="modal" data-target="#SMModal">Take the Stress test</a>*@
            <a href="Questionnaire">Take the Stress test</a>
        </p>
        <!-- questions modal start  -->
        
        <!-- questions modal end-->
        <!-- login register modal start  -->
        <div class="modal fade bs-example-modal-lg" id="SMModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Stress-o-meter</h4>
                    </div>
                    <div id="AsyncLoginFromBody" class="modal-body">
                        @using (Html.BeginForm(null, null, FormMethod.Post, new { name = "AsyncLoginFrom", id = "AsyncLoginFrom" }))
                        {
                            <!-- sign in start -->
                            <h2>Sign In</h2>
                            <div class="form-group">
                                <div class="col-md-12">
                                    @Html.TextBox("AsyncuserLogin", null, new { @placeholder = "User Name", @class = "form-control", @required = "required" })
                                </div>
                            </div>
                            <div class="form-group">
                                <div class=" col-md-12">
                                    @Html.Password("AsyncuserPassword", null, new { @placeholder = "Password", @class = "form-control", @required = "required" })
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-12">@Html.ActionLink("Forget Password?", "ForgotPassword", "Home")</div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-12">
                                    <input id="AsyncSubmitLogin" type="submit" onclick="ValidateandSubmit();" value="Sign In" class="btn btn-primary" />
                                </div>
                            </div>
                            <!-- sign in end -->
                            <hr />
                            <!-- register start -->
                            <h2>Register New User</h2>
                            <p>New to No Warry No Tension? Create an account to get started today.</p>
                            @*<input type="button" value="Create My Account" class="btn btn-primary" />*@
                            <!-- Large modal start  -->
                            <button class="btn btn-primary" data-toggle="modal" onclick="ShowRegistration();">Create My Account</button>
                            <!-- register end-->
                        }
                    </div>
                </div>
            </div>
        </div>
        <!-- login register modal end-->

    </div>
    <!-- left col end -->
    <!-- right col start -->
    <div class="col-md-3 rnav-cont" id="col-right">
        @Html.Partial("_PartialNewsUpdates")
    </div>
    <!-- right col end -->
</div>
<!-- main content end -->